<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import 'highlight.js/styles/github.css'
import hljs from 'highlight.js/lib/core'
import vue from 'highlight.js/lib/languages/xml'
import javascript from 'highlight.js/lib/languages/javascript'
import css from 'highlight.js/lib/languages/css'

// 注册需要的语言
hljs.registerLanguage('vue', vue)
hljs.registerLanguage('javascript', javascript)
hljs.registerLanguage('css', css)

const fileInput = ref(null)
const fileContent = ref('')
const selectedFileName = ref('')
const highlightedContent = ref('')
const copySuccess = ref(false)
const downloadSuccess = ref(false)

const highlightCode = (code) => {
  return hljs.highlight(code, { language: 'vue' }).value
}

const triggerFileInput = () => {
  console.log('触发文件选择')
  if (fileInput.value) {
    fileInput.value.click()
  } else {
    console.error('文件输入框未找到')
  }
}

const copyCode = async () => {
  try {
    await navigator.clipboard.writeText(fileContent.value)
    copySuccess.value = true
    setTimeout(() => {
      copySuccess.value = false
    }, 2000)
  } catch (err) {
    console.error('复制失败:', err)
    alert('复制失败，请重试')
  }
}

const downloadFile = () => {
  try {
    const blob = new Blob([fileContent.value], { type: 'text/plain' })
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = selectedFileName.value || 'downloaded-file.vue'
    document.body.appendChild(a)
    a.click()
    window.URL.revokeObjectURL(url)
    document.body.removeChild(a)
    
    downloadSuccess.value = true
    setTimeout(() => {
      downloadSuccess.value = false
    }, 2000)
  } catch (err) {
    console.error('下载失败:', err)
    alert('下载失败，请重试')
  }
}

const handleFileUpload = async (event) => {
  const file = event.target.files[0]
  if (!file) return
  
  selectedFileName.value = file.name
  console.log('选择的文件:', file.name)

  const formData = new FormData()
  formData.append('file', file)

  try {
    const response = await axios.post('http://localhost:3000/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    fileContent.value = response.data.content
    highlightedContent.value = highlightCode(response.data.content)
    console.log('文件上传成功')
  } catch (error) {
    console.error('上传失败:', error)
    alert('文件上传失败')
  }
}
</script>

<template>
  <div class="container">
    <h1>Vue文件上传与显示</h1>
    <div class="upload-section">
      <input 
        type="file" 
        @change="handleFileUpload" 
        ref="fileInput"
        accept=".vue"
        style="display: none"
      >
      <button @click="triggerFileInput">选择Vue文件</button>
      <p v-if="selectedFileName" class="file-name">已选择文件: {{ selectedFileName }}</p>
    </div>
    <div v-if="fileContent" class="content-section">
      <div class="content-header">
        <h2>文件内容：</h2>
        <div class="action-buttons">
          <button class="action-button copy-button" @click="copyCode">
            <span v-if="!copySuccess">复制代码</span>
            <span v-else class="success-text">复制成功！</span>
          </button>
          <button class="action-button download-button" @click="downloadFile">
            <span v-if="!downloadSuccess">下载文件</span>
            <span v-else class="success-text">下载成功！</span>
          </button>
        </div>
      </div>
      <div class="code-container">
        <pre><code v-html="highlightedContent"></code></pre>
      </div>
    </div>
  </div>
</template>

<style scoped>
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

.upload-section {
  margin: 20px 0;
  text-align: center;
}

.file-name {
  margin-top: 10px;
  color: #666;
}

button {
  padding: 12px 24px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #45a049;
}

.content-section {
  margin-top: 20px;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.action-button {
  padding: 8px 16px;
  font-size: 14px;
}

.copy-button {
  background-color: #1a73e8;
}

.copy-button:hover {
  background-color: #1557b0;
}

.download-button {
  background-color: #34a853;
}

.download-button:hover {
  background-color: #2d8a46;
}

.success-text {
  color: #fff;
}

.code-container {
  margin-top: 15px;
  background-color: #ffffff;
  border-radius: 4px;
  overflow: auto;
  max-height: 600px;
}

pre {
  margin: 0;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 4px;
}

:deep(code) {
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 14px;
  line-height: 1.5;
}

h1 {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 30px;
}

h2 {
  color: #34495e;
  margin: 0;
}
</style>
